<template>
	<div class="categoryTemplate bg-white bj front-padding">
        <el-scrollbar style="height: 100%;">
            <div class="tit">借款单</div>
            <div class="formTable relative">
                <div class="formTableHeader absolute">
                    <div class="left">
                        <span>单据编号：{{formData.receiptNumber}}</span>
                    </div>
                    <div class="right">
                        <span>制单日期： {{$util.currentDate()}}</span>
                    </div>
                </div>
                <el-row>
                    <el-col :span="3">
                        <div class="common">事业部</div>               
                    </el-col>
                    <el-col :span="4">
                        <div class="common grayBackground">{{formData.businessUnitName}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">中心</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="common grayBackground">{{formData.centreName}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">部门</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="common grayBackground">{{formData.deptName}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">姓名</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common grayBackground">{{formData.empName}}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common">借款类别</div>               
                    </el-col>
                    <el-col :span="4">
                        <div class="common">{{formData.loanCategoryName}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">币别</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="common">{{formData.currencyName}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">付款科目</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="common">{{formData.paymentSubjects}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">借款余额</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">{{formData.loanBalance}}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common">预计还款时间</div>               
                    </el-col>
                    <el-col :span="4">
                        <div class="common">{{formData.expectedRepaymentDate}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common borderNone">收款</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">银行户主</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="common">{{formData.householderIncome}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common">付款</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">银行户主</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="common"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common">借款人员</div>               
                    </el-col>
                    <el-col :span="1">
                        <div class="common">手机</div>               
                    </el-col>
                    <el-col :span="3">
                        <div class="common">{{formData.phone}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common">银行</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">开户银行</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="common">{{formData.bankIncome}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common">银行</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">开户银行</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="common"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common">联系方式</div>               
                    </el-col>
                    <el-col :span="1">
                        <div class="common">内线</div>               
                    </el-col>
                    <el-col :span="3">
                        <div class="common"></div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common">信息</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">银行账号</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="common">{{formData.bankAccountIncome}}</div>
                    </el-col>
                    <el-col :span="1">
                        <div class="common">信息</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">银行账号</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="common"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common minHeight">借款事由</div>
                    </el-col>
                    <el-col :span="14">
                        <div class="common minHeight">{{formData.borrowingReason}}</div>
                    </el-col>
                    <el-col :span="7">
                        <div class="common minHeight">
                            <el-row style="width:100%">
                                <el-col :span="24">
                                    <div class="common" style="border-right: none;">声明</div>
                                </el-col>                            
                            </el-row>
                            <el-row style="width:100%">
                                <el-col :span="24">
                                    <div class="common borderNone" style="line-height: 22px;padding: 3px;border-right: none;">本借款超过预计还款日期,或报销冲借款后有借款余额，同意从本人工资中扣除。</div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="common">借款大写金额</div>               
                    </el-col>
                    <el-col :span="9">
                        <div class="common grayBackground">{{formData.amountBig}}</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">制单金额</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">{{formData.voucherAmount}}</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">审批金额</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="common">{{formData.approvalAmount}}</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <div class="common grayBackground">直接主管</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">张三</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">间接主管</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">李四</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">财务主管</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">王五</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">财务经理</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">赵六</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">财务总监</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">小明</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle bg-blue"></div>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle bg-blue"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle bg-blue"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle bg-red"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common displayFlex">
                            <div class="circle"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <div class="common grayBackground">副总经理</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">张总</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">总经理</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">李总</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">董事长</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">王总</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common grayBackground">出纳</div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">小红</div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common"></div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle"></div>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common">
                            <div class="circle"></div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common">
                            <img src="../../../assets/images/gobackto.png" alt="">
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="common"></div>
                    </el-col>
                    <el-col :span="3">
                        <div class="common"></div>
                    </el-col>
                </el-row>
            </div>
        </el-scrollbar>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formData: {},
            rowId: this.$store.state.borrowOrderStore.rowId
        }
    },
    methods: {
        getData() {
            this.$http.get('borrowingForm/selectBorrowingFormById?id=' + this.rowId).then(res => {
                if(res.data.code == 20001) {
                    if(res.data.data) {
                        this.formData = res.data.data;
                        this.formData['voucherAmount'] = '￥' + this.$util.formatNumberRgx(this.formData['voucherAmount'].toFixed(2));
                        this.formData['approvalAmount'] = '￥' + this.$util.formatNumberRgx(this.formData['approvalAmount'].toFixed(2));
                    }
                }
            });
        }
    },
    created() {
        if(this.rowId) this.getData();
    }
}
</script>
<style scoped>
    .minHeight {height: 90px !important;line-height: 90px !important;}
    .circle {display: inline-block;border: 1px solid #000;border-radius: 50%;width: 16px;height: 16px;vertical-align: middle;background-color: #fff;}
    .circle.bg-blue {border-color: #409EFF;background-color: #409EFF;}
    .circle.bg-red {border-color: #f78989;background-color: #f78989;}
</style>